<template>
  <div class>
    <div class="aa">
      <div class="header1">
        <ul>
          <li>GiiBee</li>
          <li @click="$router.push('/')">首页</li>
          <li @click="$router.push('/about')">产品展示</li>
          <li @click="$router.push('/my')">关于我们</li>
          <li @click="lx">联系我们</li>
        </ul>
        <div>
          <input type="text" v-model="sear" />
          <button @click="ss">搜索</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //搜索v-model
      sear: "",
    };
  },
  mounted() {},
  methods: {
    //跳转到我们这个页面，通过传递id来进行切换
    lx() {
      this.$router.push({
        path: "/my",
        query: {
          id: "0",
        },
      });
    },
    ss() {
      // 通过点击按钮进行搜索，就是通过路由跳转把输入的值拼接在地址栏中
      this.$router.push({
        path: "/about",
        query: {
          val: this.sear,
          // url的参数, 类似get请求的传参
        },
      });
    },
  },
  components: {},
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.aa {
  // background-color: #17a2b6;
  height: 60px;
}
.header1 {
  background-color: #17a2b6;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  margin: auto;
  margin-bottom: 100px;
  ul {
    // margin-left: 70px;
    margin-left: 150px;
    background-color: #17a2b6;

    width: 70%;
    // float: left;
    // flex: 1;
    list-style: none;
    // display: flex;
    height: 60px;
    li {
      background-color: #17a2b6;

      color: #fff;
      line-height: 60px;
      float: left;
      margin-left: 60px;
    }
  }
  div {
    background-color: #17a2b6;

    width: 30%;
    input {
      // float: right;
      border-radius: 5px;
      // margin-left: 300px;a
      height: 25px;
      margin-top: 15px;
    }
    button {
      // float: right;

      border-radius: 3px;
      width: 50px;
      height: 29px;
      color: white;
      border: none;
      background-color: #6c757f;
      margin-top: 15px;
    }
  }
}
</style>
